<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            width: 100%;
        }

        body {
            perspective: 1000px;
            background: skyblue;
            /*display: flex;*/
            /*justify-content: space-around;*/
            /*align-items: center;*/
            position: relative;
        }

        .box {
            width: 100px;
            height: 100px;
            left:20px;
            top:20px;
            position: absolute;
            transition: all 3s ease-out;
            transform-style: preserve-3d;
        }

        .first {
            transition: all 3s ease-out;
        }

        .second {
            transition: all 4s ease-out;
        }

        .third {
            transition: all 6s ease-out;
        }

        ul {
            list-style: none;
            position: absolute;
            width: 100px;
            height: 100px;
            background: whitesmoke;
            border: 1px solid #555555;
            display: flex;
        }

        li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: gray;
            margin: 5px;
        }

        ul:nth-child(1) {
            transform: translateZ(50px);
            justify-content: center;
            align-items: center;
        }

        ul:nth-child(2) {
            transform: rotateY(90deg) translateZ(50px);
            justify-content: space-around;
            align-items: center;
        }

        ul:nth-child(3) {
            transform: rotateY(180deg) translateZ(50px);
            justify-content: space-around;
        }

        ul:nth-child(3) li:nth-child(1) {
            margin: 10px 0 0 10px;
        }

        ul:nth-child(3) li:nth-child(2) {
            align-self: center;
        }

        ul:nth-child(3) li:nth-child(3) {
            align-self: flex-end;
            margin: 0 10px 10px 0;
        }

        ul:nth-child(4) {
            transform: rotateY(-90deg) translateZ(50px);
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }

        ul:nth-child(4) li {
            margin: 10px;
        }

        ul:nth-child(5) {
            transform: rotateX(90deg) translateZ(50px);
            flex-wrap: wrap;
            justify-content: space-around;
        }

        ul:nth-child(5) li {
            margin: 10px;
        }

        ul:nth-child(5) li:nth-child(3) {
            margin: 0 20px;
        }

        ul:nth-child(6) {
            transform: rotateX(-90deg) translateZ(50px);
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }

        ul:nth-child(6) li {
            margin: 0 10px;
        }
    </style>
</head>
<body>
<div class="box first">
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="box second">
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="box third">
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    var box = document.querySelectorAll(".box");
    var deg = [0, 0, 0];
    var flag = true;
    var topp = [0, 0, 0];
    var left = [0, 0, 0];
    for (var i = 0; i < box.length; i++) {
        box[i].onclick = function () {
            if (flag) {
                flag = false;
                for (var i = 0; i < box.length; i++) {
                    deg[i] += Math.floor(Math.random() * 3601 + 1800);
                    topp[i] += Math.floor(Math.random() * 61 + 20);
                    if (topp[i] > 60) {
                        topp[i] -= Math.floor(Math.random() * 61 + 20);
                    }
                    left[i] += Math.floor(Math.random() * 61);
                    if (left[i] > 60) {
                        left[i] -= Math.floor(Math.random() * 61);
                    }
                    box[i].style.transform = "rotateX(" + deg[i] + "deg) rotateY(" + deg[i] + "deg)";
                    box[i].style.top = topp[i] + "%";
                    box[i].style.left = left[i] + "%";
                }
                setInterval(function () {
                    flag = true;
                }, 6000);
            }
        };
    }
</script>
</body>
</html>